三明网站优化,爱情树表白网页在线制作,临沂罗庄做网站公司,中国移动官网登录入口1.构建对象
说明#xff1a;参数一表示坐标轴的长度。红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
const axesHelper new THREE.AxesHelper( 1 );
2.设置位置
axesHelper.position.y1
axesHelper.position.x1
axesHelper.position.z1
3. 网格
说明#xff1a;立方体…1.构建对象
说明参数一表示坐标轴的长度。红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
const axesHelper new THREE.AxesHelper( 1 );
2.设置位置
axesHelper.position.y1
axesHelper.position.x1
axesHelper.position.z1
3. 网格
说明立方体在网格里面通过网格控制立方体在场景的位置。 const cubenew THREE.Mesh(geometry,material)cube.position.set(1,1,1)scene.add(cube)
4.显示
说明立方体与坐标轴重合。 5.源码
script setup
import * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;const width window.innerWidth, height window.innerHeight;// initconst camera new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.set(5,2,2)const scene new THREE.Scene();// 添加网格地面const GridHelpernew THREE.GridHelper(10,10,0x444444,red)scene.add(GridHelper)
// 立方体的猖狂
const geometry new THREE.BoxGeometry( 0.2,0.2,0.2);
const material new THREE.MeshNormalMaterial();// 网格 立方体在网格里面通过网格控制立方体在场景的位置
const cubenew THREE.Mesh(geometry,material)
cube.position.set(1,1,1)
scene.add(cube)
const renderer new THREE.WebGLRenderer( { antialias: true } );
const controls new OrbitControls( camera, renderer.domElement );
// 自动旋转
controls.autoRotatetrue
controls.dampingFactor0.01
controls.enableDampingtrue// 添加坐标轴
const axesHelper new THREE.AxesHelper( 1 );
axesHelper.position.y1
axesHelper.position.x1
axesHelper.position.z1
scene.add( axesHelper );renderer.setSize( width, height );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );// animationfunction animation( time ) {cube.rotation.x time / 2000;cube.rotation.y time / 1000;controls.update()renderer.render( scene, camera );}
/scripttemplate
div/div/templatestyle scoped
/style
