下载对应的js 包括案例
git clone git@gitee.com:173970984/three.js.git
下载下来的目录结构如下图，核心文件是build 里面的three.module.js
threejs 应用的整体结构图
整体结构是由场景(scene)、摄像机(camera)、渲染器(renderer)组成。
就跟我们看别人拍电影一样，scene就是拍摄的场地，场地上面有人、有房子树木、灯光、各种各样的物品。
mesh 就是一个网格对象， 好比房子的窗户就是其中一个网格对象。
如下图6个面的长方形，不同面的颜色不同，其中A面代表着其中一个material，6个面就是6个不同的material
也可以是相同的
接下来我们创建一个长方形
第一步、创建摄像头
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>创建长方形
<div id="container">
<script type="module">
import *as THREEfrom "./build/three.module.js";
import { OrbitControls }from './examples/jsm/controls/OrbitControls.js';
let camera,scene,renderer ;
let container=document.getElementById("container");//获取container
scene=new THREE.Scene();//创建场景
camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000);
camera.position.set(8,8,8);//创建相机并设置位置
// 设置环境灯光
let ambientLight=new THREE.AmbientLight();
ambientLight.position.set(4,2,4);
scene.add(ambientLight);
// 几何体
let geometry=new THREE.CubeGeometry(8,5,5);
// 材质
let material=new THREE.MeshPhongMaterial({color:0x0033ff,specular:0x555555,shininess:30});
let material1=new THREE.MeshPhongMaterial({color:0x888888,specular:0x888888,shininess:30});
let material2=new THREE.MeshPhongMaterial({color:0xFF44AA,specular:0xFF44AA,shininess:30});
let material3=new THREE.MeshPhongMaterial({color:0xFF3333,specular:0xFF3333,shininess:30});
let material4=new THREE.MeshPhongMaterial({color:0xFFAA33,specular:0xFFAA33,shininess:30});
let material5=new THREE.MeshPhongMaterial({color:0xBBFF00,specular:0xBBFF00,shininess:30});
let materialsx=[material,material1,material2,material3,material4,material5];
// 网格
let mesh=new THREE.Mesh(geometry,materialsx);
scene.add(mesh);
// 渲染器
renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth,window.innerHeight);
container.appendChild(renderer.domElement);
let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象
run()
function run() {
requestAnimationFrame(run);
renderer.render(scene,camera);
}
body {
margin:0;
background-color:#fff;
color:#fff;
font-family:Monospace;
font-size:13px;
line-height:24px;
overscroll-behavior:none;
}
a {
color:#ff0;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
button {
cursor:pointer;
text-transform:uppercase;
}
#container{
width:100%;
height:650px;
background-color:#000000;
}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>创建长方形</title></head><body><div id="container"></div><script type="module"> import * as THREE from "./build/three.module.js"; import { OrbitControls } from './examples/jsm/controls/OrbitControls.js'; let camera,scene,renderer ; let container=document.getElementById("container");//获取container scene=new THREE.Scene();//创建场景 camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000); camera.position.set(8,8,8);//创建相机并设置位置 // 设置环境灯光 let ambientLight=new THREE.AmbientLight(); ambientLight.position.set(4,2,4); scene.add(ambientLight); // 几何体 let geometry=new THREE.CubeGeometry(8,5,5); // 材质 let material=new THREE.MeshPhongMaterial({color:0x0033ff,specular:0x555555,shininess:30}); let material1=new THREE.MeshPhongMaterial({color:0x888888,specular:0x888888,shininess:30}); let material2=new THREE.MeshPhongMaterial({color:0xFF44AA,specular:0xFF44AA,shininess:30}); let material3=new THREE.MeshPhongMaterial({color:0xFF3333,specular:0xFF3333,shininess:30}); let material4=new THREE.MeshPhongMaterial({color:0xFFAA33,specular:0xFFAA33,shininess:30}); let material5=new THREE.MeshPhongMaterial({color:0xBBFF00,specular:0xBBFF00,shininess:30}); let materialsx=[material,material1,material2,material3,material4,material5]; // 网格 let mesh=new THREE.Mesh(geometry,materialsx); scene.add(mesh); // 渲染器 renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(0xEEEEEE); renderer.setSize(window.innerWidth,window.innerHeight); container.appendChild(renderer.domElement); let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象 run() function run() { requestAnimationFrame(run); renderer.render(scene,camera); }</script><style> body { margin: 0; background-color: #fff; color: #fff; font-family: Monospace; font-size: 13px; line-height: 24px; overscroll-behavior: none; } a { color: #ff0; text-decoration: none; } a:hover { text-decoration: underline; } button { cursor: pointer; text-transform: uppercase; } #container{ width: 100%; height: 650px; background-color: #000000; }</style></body></html>
