当前位置：首页 > news >正文

three入门，创建一个长方体、认识场景、模型、光源、相机？渲染器

news 来源：原创 2025/6/17 3:58:56

版本号174

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
// 这样写就可以像es6那样 import 导入，比如 from "three",就会去找下面的three.js/build/three.module.js
    <script type="importmap">
        {
            "imports": {
                "three": "../../../three.js/build/three.module.js",
                "three/addons/":"../../../three.js/examples/jsm/"
             }
        
        }
    </script>
    <script type="module">
        
    </script>
    <script src="./index.js" type="module">
    
    </script>
</body>
</html>

js代码

import * as THREE from 'three';
// 引入相机控件
import { OrbitControls } from "three/addons/controls/OrbitControls.js"


// 定义相机输出的画布的尺寸 单位 像素
const width=800
const height=500
// 创建三维场景
const scene = new THREE.Scene();
// 给三维场景添加物体

// 定一个几何体 长方体 长宽高都是100
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建一个材质对象 
/*
 * 网格材质对象
 */
const material = new THREE.MeshLambertMaterial({
  color: 0x78EE28,  // 设置颜色 红色
  
});
// 创建一个网格模型
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);

// 添加到场景中 
scene.add(mesh);
// 创建一个三维坐标轴
const axesHelper=new THREE.AxesHelper(150);
// 坐标轴对象添加到三维场景中
scene.add(axesHelper)
// 防创建一个点光源
// 设置点光源位置 参数1素颜色，参数2强度
/**
 * 
 * 参数1：点光源颜色
 * 参数2： 光照强度 默认1
 * 参数3 光源照射的最大距离 默认值为 0（无限远）。
 * 参数4 沿着光照距离的衰退量。默认值为 2。
 * 
 */
const pointLight=new THREE.PointLight(0xffffff,1)
pointLight.pointLight=1
pointLight.decay=0.0 //光源衰减 禁用
// 光源位置 x,y z 位置
pointLight.position.set(800,150,200)
//光源也需要添加三维场景
scene.add(pointLight)
// 创建一个相机
// 相机位置在网格模型上方 近裁截面1 远裁离3000
const camera=new THREE.PerspectiveCamera(40,width/height,1,3000)
// 设置相机位置
// camera.position.set(-2000,200,200);
camera.position.set(400,200,100)
// 相机的实现 观察点的坐标
camera.lookAt(0,0,0)  // 相机观察坐标原点 X Y Z 坐标
// camera.lookAt(mesh.position) //指向网格模型mesh


// 创建一个渲染器
const renderer =new THREE.WebGLRenderer()
renderer.setSize(width,height); // 设置渲染器的尺寸 canvas画布宽高度
renderer.render(scene,camera); //执行渲染操作 将场景中的内容 渲染到相机中
//、
document.body.appendChild(renderer.domElement);


// 创建相机控件对象
// 参数 相机 渲染器
const controls =new OrbitControls(camera,renderer.domElement);
// 监听相机的移动
controls.addEventListener('change',function(e){
  console.log("哈哈哈",e)
    renderer.render(scene,camera);
})