threejs--02threejs手册起步+进阶

快速过一下基本用法

01 场景

//场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );//大小
document.body.appendChild( renderer.domElement );//加物体
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.position.z = 5;//设置位置function animate() {//使渲染器能够在每次屏幕刷新时对场景进行绘制的循环,当用户切换到其它的标签页时，它会暂停(跟setInterval差不多)。不然以上代码画面是空的requestAnimationFrame( animate );cube.rotation.x += 0.01;//动画cube.rotation.y += 0.01;//动画renderer.render( scene, camera );//渲染
}
animate();

02 兼容性检查

引入WebGL.js

if (WebGL.isWebGLAvailable()) {// Initiate function or other initializations hereanimate();
} else {const error = WebGL.getWebGLErrorMessage();console.error(error)
}

03 画线

const scene = new THREE.Scene();//场景const renderer = new THREE.WebGLRenderer();//渲染器
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );//相机位置
camera.lookAt( 0, 0, 0 );//相机朝向const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );//材质
//构建三维几何体
const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );//Vector3--三维空间中的向量
points.push( new THREE.Vector3( 0, 10, 0 ) );//Vector3--三维空间中的向量
points.push( new THREE.Vector3( 10, 0, 0 ) );//Vector3--三维空间中的向量
//线是画在每一对连续的顶点之间的，不闭合
const geometry = new THREE.BufferGeometry().setFromPoints( points );//BufferGeometry--定义3D几何体
const line = new THREE.Line( geometry, material );//物体=几何体+材质scene.add( line );//加到场景中
renderer.render( scene, camera );//渲染

04 字体

CSS2DRenderer 或CSS3DRenderer

2.TextureLoader

const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

3.TextGeometry

new THREE.TextGeometry( text, parameters );

import * as THREE from 'three';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';THREE.Cache.enabled = true;let container;
let camera, cameraTarget, scene, renderer;
let group, textMesh1, textMesh2, textGeo, materials;
let firstLetter = true;
let text = 'three.js',bevelEnabled = true,font = undefined,fontName = 'optimer', // helvetiker, optimer, gentilis, droid sans, droid seriffontWeight = 'bold'; // normal boldconst depth = 20,size = 70,hover = 30,curveSegments = 4,bevelThickness = 2,bevelSize = 1.5;const mirror = true;const fontMap = {helvetiker: 0,optimer: 1,gentilis: 2,'droid/droid_sans': 3,'droid/droid_serif': 4,
};const weightMap = {regular: 0,bold: 1,
};const reverseFontMap = [];
const reverseWeightMap = [];for (const i in fontMap) reverseFontMap[fontMap[i]] = i;
for (const i in weightMap) reverseWeightMap[weightMap[i]] = i;let targetRotation = 0;
let targetRotationOnPointerDown = 0;let pointerX = 0;
let pointerXOnPointerDown = 0;let windowHalfX = window.innerWidth / 2;let fontIndex = 1;init();
animate();function init() {container = document.createElement('div');document.body.appendChild(container);//相机camera = new THREE.PerspectiveCamera(30,window.innerWidth / window.innerHeight,1,1500,);camera.position.set(0, 400, 700);cameraTarget = new THREE.Vector3(0, 150, 0);//场景scene = new THREE.Scene();scene.background = new THREE.Color(0x000000);scene.fog = new THREE.Fog(0x000000, 250, 1400);//雾//光const dirLight = new THREE.DirectionalLight(0xffffff, 0.4);dirLight.position.set(0, 0, 1).normalize();scene.add(dirLight);const pointLight = new THREE.PointLight(0xffffff, 4.5, 0, 0);pointLight.color.setHSL(Math.random(), 1, 0.5);pointLight.position.set(0, 100, 90);scene.add(pointLight);materials = [new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }), // frontnew THREE.MeshPhongMaterial({ color: 0xffffff }), // side];//字体组group = new THREE.Group();group.position.y = 100;scene.add(group);loadFont();//平面const plane = new THREE.Mesh(new THREE.PlaneGeometry(10000, 10000),new THREE.MeshBasicMaterial({color: 0xffffff,opacity: 0.5,transparent: true,}),);plane.position.y = 100;plane.rotation.x = -Math.PI / 2;scene.add(plane);//渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);
}function createText() {textGeo = new TextGeometry(text, {font: font,size: size,depth: depth,curveSegments: curveSegments,bevelThickness: bevelThickness,bevelSize: bevelSize,bevelEnabled: bevelEnabled,});textGeo.computeBoundingBox();const centerOffset =-0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);textMesh1 = new THREE.Mesh(textGeo, materials);textMesh1.position.x = centerOffset;textMesh1.position.y = hover;textMesh1.position.z = 0;textMesh1.rotation.x = 0;textMesh1.rotation.y = Math.PI * 2;group.add(textMesh1);//倒影if (mirror) {textMesh2 = new THREE.Mesh(textGeo, materials);textMesh2.position.x = centerOffset;textMesh2.position.y = -hover;textMesh2.position.z = depth;textMesh2.rotation.x = Math.PI;textMesh2.rotation.y = Math.PI * 2;group.add(textMesh2);}
}function refreshText() {group.remove(textMesh1);if (mirror) group.remove(textMesh2);if (!text) return;createText();
}
//载入字体模型
function loadFont() {const loader = new FontLoader();loader.load('fonts/' + fontName + '_' + fontWeight + '.typeface.json',function (response) {font = response;refreshText();},);
}
function animate() {requestAnimationFrame(animate);//动起来render();//渲染
}function render() {group.rotation.y += (targetRotation - group.rotation.y) * 0.05;camera.lookAt(cameraTarget);//相机朝向renderer.clear();//清除renderer.render(scene, camera);//渲染
}

03 载入载入3D模型

const loader = new GLTFLoader();loader.load( 'path/to/model.glb', function ( gltf ) {scene.add( gltf.scene );
}, undefined, function ( error ) {console.error( error );
} );