three.js基础案例day01——可交互的立方体

本文主要是环境搭建和在场景中添加一个可交互的立方体，具体效果如下：

1.下载three.js并导入

npm install three.js

// 导入
import * as THREE from 'three'

2.创建场景、相机、物体、渲染器

  scene = new THREE.Scene()
  console.log('three', THREE)

  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)

  camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000)
  camera.position.z = 50
  scene.add(camera)

   // 三维坐标
  const axesHelper = new THREE.AxesHelper(40)
  scene.add(axesHelper)

  renderer = new THREE.WebGLRenderer()
  renderer.setSize(width, height)
  elementRef.value.appendChild(renderer.domElement)

3. 导入并使用轨道控制器

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

controls = new OrbitControls(camera, renderer.domElement)
function render() {
  requestAnimationFrame(render)
  controls.update()
  renderer.render(scene, camera)
}

全部代码
 

<template>
  <div id="threeId" ref="elementRef"></div>
</template>

<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { ref, onMounted, onBeforeUnmount } from 'vue'

let scene, camera, renderer, controls
const elementRef = ref(null)
onMounted(() => {
  const element = elementRef.value
  const width = element.offsetWidth
  const height = element.offsetHeight
  initScene(width, height)
  render()
})

function initScene(width, height) {
  // 初始化场景: 创建场景，相机，物体，渲染器
  scene = new THREE.Scene()
  console.log('three', THREE)

  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)

  camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000)
  camera.position.z = 50
  scene.add(camera)

  const axesHelper = new THREE.AxesHelper(40)
  scene.add(axesHelper)

  renderer = new THREE.WebGLRenderer()
  renderer.setSize(width, height)
  console.log('document.getElementById', document.getElementById('threeId'))
  elementRef.value.appendChild(renderer.domElement)
  controls = new OrbitControls(camera, renderer.domElement)
  controls.update()
}
function render() {
  requestAnimationFrame(render)
  controls.update()
  renderer.render(scene, camera)
}
</script>