先看效果圖：
本篇給大家介紹下模型加載的知識，用到了OBJLoader對應(yīng)的模型，為了增加趣味性，花了些時間，利用new THREE.Points獲取到模型上的點，做了一個動畫效果，其實就是操作 Y軸上的點，先降低上0，然后再還原，代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-856792.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.label {
font-size: 20px;
color: #fff;
font-weight: 700;
}
.btn {
position: absolute;
right: 0;
top: 10px;
}
.button {
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="btn">
<button class="btn3 button">開始動畫</button>
<button class="btn4 button">暫停動畫</button>
</div>
<script type="importmap">
{
"imports": {
"three": "./three-155/build/three.module.js",
"three/addons/": "./three-155/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
let stats, labelRenderer, gpuPanel;
let points, speed = 0.5;
let clock = new THREE.Clock();
let flagStart = true;
let camera, scene, renderer, controls;
const group = new THREE.Group();
let widthImg = 200;
let heightImg = 200;
const dataObj = {
verticesDown: 0,
verticesUp: 0,
direction: 0, // 運動的方向
speed: 15, // 運動的速度
start: Math.floor(100 + 200 * Math.random()),
delay: Math.floor(200 + 200 * Math.random())
};
init();
initHelp();
initLight();
axesHelperWord();
animate();
// 添加平面
// addPlane();
// 創(chuàng)建模型加載器
let loader = new OBJLoader();
// loader.load('../materials/car.obj', function (loadedMesh) {
loader.load('./materials/chahu_xlo7pg.obj', function (loadedMesh) {
let material = new THREE.PointsMaterial({
color: 0xffffff,
size: 1,
// 使用 opacity 的前提是開啟 transparent
opacity: 0.8,
transparent: true,
// 設(shè)置元素與背景的融合模式
blending: THREE.AdditiveBlending,
// 指定粒子的紋理
map: generateSprite(),
// 用于去除紋理的黑色背景，關(guān)于 depthTest 和 depthWrite 的詳細(xì)解釋，
// 請查看https://stackoverflow.com/questions/37647853/three-js_three-depthwrite-vs-depthtest-for-transparent-canvas-texture-map-on-three-p
depthTest: false
});
loadedMesh.children.forEach(function (child) {
child.geometry.setAttribute( 'initialPosition', child.geometry.attributes.position.clone() );
points = new THREE.Points(child.geometry, material);
const scale = 15;
points.scale.set(scale, scale, scale);
points.position.y = 0;
scene.add(points);
});
});
let btn3 = document.querySelector('.btn3');
let btn4 = document.querySelector('.btn4');
btn3.addEventListener('click', () => {
flagStart = true;
});
btn4.addEventListener('click', () => {
flagStart = false;
});
function clearIntervalFun() {
if (upInterval) {
clearInterval(upInterval);
}
if (downInterval) {
clearInterval(downInterval);
}
}
function modelMove() {
if (!points || !flagStart) return;
let delta = 10 * clock.getDelta();
delta = delta < 2 ? delta : 2;
let positions = points.geometry.attributes.position;
let initialPositions = points.geometry.attributes.initialPosition;
let count = positions.count;
if ( dataObj.start > 0 ) {
dataObj.start -= 1;
} else {
if ( dataObj.direction === 0 ) {
dataObj.direction = - 1;
}
}
for ( let i = 0; i < count; i ++ ) {
let px = positions.getX( i );
let py = positions.getY( i );
let pz = positions.getZ( i );
// falling down
if ( dataObj.direction < 0 ) {
if ( py > 0 ) {
positions.setXYZ(
i,
px + 1.5 * (0.50 - Math.random()) * speed * delta,
py + 3.0 * (0.25 - Math.random()) * speed * delta,
pz + 1.5 * (0.50 - Math.random()) * speed * delta
);
} else {
dataObj.verticesDown += 1;
}
}
// rising up
if ( dataObj.direction > 0 ) {
let px = initialPositions.getX( i );
let py = initialPositions.getY( i );
let pz = initialPositions.getZ( i );
let pyNew = positions.getY( i );
let pyT = pyNew + 0.03;
if (pyT <= py) {
positions.setXYZ(
i,
px + 1.5 * (0.50 - Math.random()) * speed * delta,
pyT,
pz + 1.5 * (0.50 - Math.random()) * speed * delta
);
} else {
dataObj.verticesUp += 1;
positions.setXYZ(
i,
px,
py,
pz
);
}
}
}
// all vertices down 當(dāng)每一個點 都運動到了底部 達到 count
if ( dataObj.verticesDown >= count ) {
if ( dataObj.delay <= 0 ) {
dataObj.direction = 1; // 這時賦值大于0 開始向上運動
dataObj.speed = 5;
dataObj.verticesDown = 0;
dataObj.delay = 320;
} else {
dataObj.delay -= 1;
}
}
// all vertices up
if ( dataObj.verticesUp >= count ) {
if ( dataObj.delay <= 0 ) {
dataObj.direction = - 1;
dataObj.speed = 15;
dataObj.verticesUp = 0;
dataObj.delay = 120;
} else {
dataObj.delay -= 1;
}
}
positions.needsUpdate = true;
}
// 生成紋理
function generateSprite() {
let canvas = document.createElement('canvas');
canvas.width = 10;
canvas.height = 10;
let context = canvas.getContext('2d');
// createRadialGradient(x0,y0,r0,x1,y1,r1)，其中x0,y0,r0分別為起始圓的位置坐標(biāo)和半徑，x1,y1,r1為終止圓的坐標(biāo)和半徑。
let gradient = context.createRadialGradient(
canvas.width / 2,
canvas.height / 2,
0,
canvas.width / 2,
canvas.height / 2,
canvas.width
);
gradient.addColorStop(0, 'rgba(255,255,255,1)');
gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
gradient.addColorStop(1, 'rgba(0,232,3,1)');
context.fillStyle = gradient;
// context.fillStyle = '#f00';
context.fillRect(0, 0, canvas.width, canvas.height);
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
function addPlane() {
// 創(chuàng)建一個平面 PlaneGeometry(width, height, widthSegments, heightSegments)
const planeGeometry = new THREE.PlaneGeometry(widthImg, heightImg, 1, 1);
// 創(chuàng)建 Lambert 材質(zhì)：會對場景中的光源作出反應(yīng)，但表現(xiàn)為暗淡，而不光亮。
const planeMaterial = new THREE.MeshPhongMaterial({
color: 0xb2d3e6,
side: THREE.DoubleSide
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 以自身中心為旋轉(zhuǎn)軸，繞 x 軸順時針旋轉(zhuǎn) 45 度
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, -4, 0);
scene.add(plane);
}
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 10, 2000 );
camera.up.set(0, 1, 0);
camera.position.set(100, 60, 100);
camera.lookAt(0, 0, 0);
scene = new THREE.Scene();
scene.background = new THREE.Color( '#000' );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.pointerEvents = 'none';
document.getElementById( 'container' ).appendChild( labelRenderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.mouseButtons = {
LEFT: THREE.MOUSE.PAN,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.ROTATE
};
controls.enablePan = true;
// 設(shè)置最大最小視距
controls.minDistance = 20;
controls.maxDistance = 1000;
window.addEventListener( 'resize', onWindowResize );
stats = new Stats();
stats.setMode(1); // 0: fps, 1: ms
document.body.appendChild( stats.dom );
gpuPanel = new GPUStatsPanel( renderer.getContext() );
stats.addPanel( gpuPanel );
stats.showPanel( 0 );
scene.add( group );
}
function initLight() {
const light = new THREE.DirectionalLight(new THREE.Color('rgb(253,253,253)'));
light.position.set(100, 100, -10);
light.intensity = 3; // 光線強度
light.castShadow = true; // 是否有陰影
light.shadow.mapSize.width = 2048; // 陰影像素
light.shadow.mapSize.height = 2048;
// 陰影范圍
const d = 80;
light.shadow.camera.left = -d;
light.shadow.camera.right = d;
light.shadow.camera.top = d;
light.shadow.camera.bottom = -d;
light.shadow.bias = -0.0005; // 解決條紋陰影的出現(xiàn)
// 最大可視距和最小可視距
light.shadow.camera.near = 0.01;
light.shadow.camera.far = 2000;
const AmbientLight = new THREE.AmbientLight(new THREE.Color('rgb(255, 255, 255)'), 0.1);
// scene.add( light );
scene.add( AmbientLight );
}
function initHelp() {
// const size = 100;
// const divisions = 5;
// const gridHelper = new THREE.GridHelper( size, divisions );
// scene.add( gridHelper );
// The X axis is red. The Y axis is green. The Z axis is blue.
const axesHelper = new THREE.AxesHelper( 100 );
scene.add( axesHelper );
}
function axesHelperWord() {
let xP = addWord('X軸');
let yP = addWord('Y軸');
let zP = addWord('Z軸');
xP.position.set(50, 0, 0);
yP.position.set(0, 50, 0);
zP.position.set(0, 0, 50);
}
function addWord(word) {
let name = `<span>${word}</span>`;
let moonDiv = document.createElement( 'div' );
moonDiv.className = 'label';
// moonDiv.textContent = 'Moon';
// moonDiv.style.marginTop = '-1em';
moonDiv.innerHTML = name;
const label = new CSS2DObject( moonDiv );
group.add( label );
return label;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
if (points) {
points.rotation.y += 0.005
}
modelMove();
stats.update();
controls.update();
labelRenderer.render( scene, camera );
renderer.render( scene, camera );
}
</script>
</body>
</html>
如果有同學(xué)從我第一篇文章開始學(xué)到現(xiàn)在，相信大家對 three 已經(jīng)有了初步的認(rèn)識，會不會感覺跟學(xué)習(xí)CSS3很相似的經(jīng)歷，其實就是多看案例，多試一些效果，多從案例中吸收知識點。
如果沒有看的同學(xué)可以進入我的主頁，依次查看。
編寫不易，有幫到你的話，給個贊吧！文章來源地址http://www.zghlxwxcb.cn/news/detail-856792.html
到了這里，關(guān)于ThreeJS-3D教學(xué)八-OBJLoader模型加載+動畫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
