使用three建立一个正方体

最新推荐文章于 2024-03-08 10:51:29 发布

毁心造梦Ü

最新推荐文章于 2024-03-08 10:51:29 发布

阅读量366

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_59107733/article/details/127955898

版权

本文介绍如何使用Three.js创建一个简单的3D场景。包括导入必要的库、创建场景、相机及渲染器，添加3D物体并使用轨道控制器实现交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先我们接下来要用到三个库

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";
import { color } from "dat.gui";

2.添加场景元素


// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff0001 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

3. 将几何体添加到场景中

scene.add(cube);

4.接下来就需要渲染器才能让它显示出来


// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

5.如果没有其他需求直接输出就算完成了

renderer.render(scene, camera);

6.接下来是三维显示，用到的是轨道控制器

//添加轨道控制器
const controls=new OrbitControls(camera, renderer.domElement);
//通过render函数让静止的正方体呈现立体性
function render(){
  renderer.render(scene, camera);
  //每一帧都要渲染
  requestAnimationFrame(render);

}
//初始化render
render();