网易云音乐网站开发介绍,建设网站尺寸多少,有哪些高端的网站,网络营销题库及答案2020参考资料
三维向量Vector3与模型位置…克隆.clone()和复制.copy()
知识点
注#xff1a;基于Three.jsv0.155.0
三维向量Vector3与模型位置欧拉Euler与角度属性.rotation模型材质颜色(Color对象)模型材质父类Material#xff1a;透明、面属性模型材质和几何体属性克隆.clo…参考资料
三维向量Vector3与模型位置…克隆.clone()和复制.copy()
知识点
注基于Three.jsv0.155.0
三维向量Vector3与模型位置欧拉Euler与角度属性.rotation模型材质颜色(Color对象)模型材质父类Material透明、面属性模型材质和几何体属性克隆.clone()和复制.copy()
代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbody/body!-- 具体路径配置你根据自己文件目录设置我的是课件中源码形式 --script typeimportmap{imports: {three: ./js/three.module.js,three/addons/: ../three.js/examples/jsm/}}/scriptscript typemoduleimport * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;const width 800const height 500// 场景const scene new THREE.Scene();// 几何体const geometry new THREE.BoxGeometry(100, 100, 100);// 材质 const material new THREE.MeshBasicMaterial({color:0x0000ff,});// 网格模型物体const mesh new THREE.Mesh(geometry, material);// 位置属性mesh.position.set(0, 0, 0);// mesh.position.x 100;// mesh.scale.set(2, 2, 2);// mesh.scale.x 2;// mesh.translateOnAxis(new THREE.Vector3(1, 0, 1), 100);// mesh.translateX(100);scene.add(mesh);// 角度属性// mesh.rotation.x Math.PI / 4;// mesh.rotation.set(0, 0, Math.PI / 4);// mesh.rotateX(Math.PI / 4);console.log( ~ file: 3.1三维向量Vector3与模型位置.html:46 ~ mesh.rolation:, mesh.rotation)// 材料颜色// mesh.material.color.set(red);// mesh.material.color.set(#ff0000);// mesh.material.color.set(0xff0000);mesh.material.color.r 1;// 材料透明度mesh.material.opacity 0.8;mesh.material.transparent true; // 是否透明// 材料面属性// mesh.material.side THREE.FrontSide; // 正面可见mesh.material.side THREE.DoubleSide; // 两面可见console.log( ~ file: 3.1三维向量Vector3与模型位置.html:66 ~ mesh.material.side:, mesh.material.side) // 2console.log( ~ file: 3.1三维向量Vector3与模型位置.html:63 ~ mesh.material:, mesh.material)console.log( ~ file: 3.1三维向量Vector3与模型位置.html:89 ~ mesh.geometry:, mesh.geometry)// 克隆、复制const mesh2 mesh.clone();mesh2.position.set(200, 0, 0);mesh2.material mesh.material.clone();mesh2.material.color.set(0xff0000);mesh2.position.copy(mesh.position);mesh2.position.y 150;scene.add(mesh2);// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// 相机const camera new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls new OrbitControls(camera, renderer.domElement);controls.addEventListener(change, () {renderer.render(scene, camera);});// 渲染循环function render() {mesh.rotateY(0.01);// mesh旋转动画// 同步mesh2和mesh的姿态角度一样不管mesh姿态角度怎么变化mesh2始终保持同步mesh2.rotation.copy(mesh.rotation);renderer.render(scene, camera);requestAnimationFrame(render);}render();/script
/html
