【three.js】手把手带你理解制作一个3D场景 超级详细
我们主要目的是制作这样一个三维模型:
我们直接上代码,从代码中一点点解释模型是如何一步一步制作的。
// 引入three.js import * as THREE from 'three'; /** * 创建3D场景对象Scene */ const scene = new THREE.Scene(); /** * 创建网格模型 */ //创建一个长方体几何对象Geometry const geometry = new THREE.BoxGeometry(50, 50, 50); //材质对象Material const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, //设置材质颜色 transparent:true,//开启透明 opacity:0.5,//设置透明度 }); const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh //设置网格模型在三维空间中的位置坐标,默认是坐标原点 // mesh.position.set(0,10,0); scene.add(mesh); //网格模型添加到场景中 // AxesHelper:辅助观察的坐标系 const axesHelper = new THREE.AxesHelper(100); scene.add(axesHelper); // width和height用来设置Three.js输出的Canvas画布尺寸(像素px) const width = 800; //宽度 const height = 500; //高度 /** * 透视
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。