three.js学习

three.js学习

入门第一节

引入

import * as THREE from 'three';

1.设置场景

const scene = new THREE.Scene();

2.设置透视相机

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)

3.设定位置x,y,z

camera.position.set(0,0,10)

4.添加相机

scene.add(camera)

5.添加物体

const geometry = new THREE.BoxGeometry( 1, 1, 1 );

6.设置几何体材质颜色

const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

7.根据几何体和其材质创建物体

const cube = new THREE.Mesh( geometry, material );

8.将物体添加到场景中

scene.add( cube );

9.渲染

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到Body
document.body.appendChild(renderer.domElement)
// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera)

添加坐标轴辅助器

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper);

控制物体简单运动

function render(){
  // 修改物体位置
  cube.position.x += 0.01;
  //控制物体旋转
  cube.rotation.x += 0.01;
 if (cube.position.x > 5) {
     cube.position.x = 0;
   }
  renderer.render(scene,camera)
  // 渲染下一帧的时候就会调节render函数
  requestAnimationFrame(render)
}
render()

添加控制器

// 加载轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)

完整代码

<template>
  <div class="about">
   
  </div>
</template>

<script setup>
import * as THREE from 'three';

// 加载轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 1.场景
const scene = new THREE.Scene();
// 2.透视相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
// 设定位置x,y,z
camera.position.set(0,0,10)
// 添加相机
scene.add(camera)
// 添加物体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 设置几何体材质颜色
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
// 根据几何体和其材质创建物体
const cube = new THREE.Mesh( geometry, material );
// 将物体添加到场景中
scene.add( cube );
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到Body
document.body.appendChild(renderer.domElement)
// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper);

// 初始化时钟
const clock = new THREE.Clock();

function render(){
   // 获取时钟运行的总时长
   let time = clock.getElapsedTime();
  // console.log("时钟运行总时长：", time);

   // 获取2帧之间的时间间隔
  //  let deltaTime = clock.getDelta();
  // console.log("2帧之间的时间间隔：", deltaTime);


  // 修改物体位置
  let t = time % 5;
  cube.position.x = t * 1;
  // cube.position.x += 0.01;
  cube.rotation.x += 0.01;
  // if (cube.position.x > 5) {
  //   cube.position.x = 0;
  // }
  renderer.render(scene,camera)
  // controls.update()
  // 渲染下一帧的时候就会调节render函数
  requestAnimationFrame(render)
}
render()
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: cornflowerblue;
  }
}
</style>