You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
8.8 KiB
186 lines
8.8 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>eg18-2: Three.js 旋转的盒子(重构)--加入阴影</title>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "./libs/three/three.module.js",
|
|
"jsm/": "./libs/three/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
|
|
|
|
import { OrbitControls } from 'jsm/controls/OrbitControls.js';
|
|
import { GLTFLoader } from 'jsm/loaders/GLTFLoader.js';
|
|
|
|
import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js';
|
|
var renderer = null;
|
|
//初始化渲染器
|
|
function initThree() {
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(renderer.domElement);
|
|
}
|
|
var camera = null;
|
|
// 照像机设置
|
|
function initCamera() {
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
camera.position.set(10, 10, 10);
|
|
camera.lookAt(new THREE.Vector3(0, 2, 0))
|
|
}
|
|
var scene = null;
|
|
// 场景设置
|
|
function initScene() {
|
|
scene = new THREE.Scene();
|
|
var axes = new THREE.AxisHelper(1000)
|
|
scene.add(axes)
|
|
}
|
|
// 灯光设置
|
|
function initLight() {
|
|
//add
|
|
//环境光
|
|
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
|
|
scene.add(ambientLight);
|
|
//点光
|
|
var pointLight = new THREE.PointLight(0xffffff, 0.8, 18);
|
|
pointLight.position.set(0, 2, 0);
|
|
// scene.add(pointLight);
|
|
}
|
|
var mesh = null;
|
|
// 几何体（物体）设置
|
|
function initObject() {
|
|
// var geometry = new THREE.CubeGeometry(1,1,1);
|
|
// var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
|
|
// mesh = new THREE.Mesh(geometry, material);
|
|
// mesh.position.y+=1;
|
|
// scene.add(mesh);
|
|
|
|
// meshfloor=new THREE.Mesh(
|
|
// new THREE.PlaneGeometry(10,10,10,10),
|
|
// new THREE.MeshPhongMaterial({color:0xffffff,wireframe:false,side: THREE.DoubleSide})
|
|
// )
|
|
// meshfloor.rotation.x -=Math.PI/2;
|
|
|
|
|
|
// scene.add(meshfloor);
|
|
//Create a closed wavey loop
|
|
|
|
// 创建曲线路径
|
|
// var curve = new THREE.CatmullRomCurve3([
|
|
// new THREE.Vector3(-10, 0, 10),
|
|
// new THREE.Vector3(-5, 5, 5),
|
|
// new THREE.Vector3(0, 0, 0),
|
|
// new THREE.Vector3(5, -5, 5),
|
|
// new THREE.Vector3(10, 0, 10),
|
|
// new THREE.Vector3(10, 0, 10)
|
|
// ]);
|
|
|
|
// var points = curve.getPoints(50);
|
|
// var geometry = new THREE.BufferGeometry().setFromPoints(points);
|
|
|
|
// var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
|
|
|
|
// // Create the final object to add to the scene
|
|
// var curveObject = new THREE.Line(geometry, material);
|
|
// scene.add(curveObject)
|
|
}
|
|
// 开始渲染
|
|
function render() {
|
|
requestAnimationFrame(render);
|
|
// mesh.rotation.x += 0.1;
|
|
// mesh.rotation.y += 0.1;
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function threeStart() {
|
|
|
|
initThree(); // 初始化渲染器
|
|
initCamera(); // 照像机设置
|
|
initScene(); // 场景设置
|
|
initLight(); // 灯光设置
|
|
initObject(); // 几何体（物体）设置
|
|
render(); // 开始渲染
|
|
createTube();
|
|
var controls = new OrbitControls(camera, renderer.domElement);
|
|
}
|
|
|
|
function start() {
|
|
if (WEBGL.isWebGLAvailable()) {
|
|
// Initiate function or other initializations here
|
|
threeStart();
|
|
} else {
|
|
var warning = WEBGL.getWebGLErrorMessage();
|
|
document.getElementById('container').appendChild(warning);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// 此部分为了展示为hardcode
|
|
const pathArr = [
|
|
// 4624.99, 2329.38, -5843.11,
|
|
// 4624.99, 4643.14, -5843.11,
|
|
// 1437.47, 4643.14, -5819.36,
|
|
// 1413.69, 4643.14, -1854.40,
|
|
// -6983.28, 4643.14, -1854.04,
|
|
// -7078.43, 4643.14, 2149.46
|
|
-10, 0, 10,
|
|
-5, 5, 5,
|
|
0, 0, 0,
|
|
5, -5, 5,
|
|
10, 0, 10,
|
|
10, 10, 0
|
|
]
|
|
const radius = 0.5;
|
|
// 动态创建一个管道
|
|
function createTube() {
|
|
let curveArr = []
|
|
// 三个一组取出curve数据
|
|
for (let i = 0; i < pathArr.length; i += 3) {
|
|
curveArr.push(new THREE.Vector3(pathArr[i], pathArr[i + 1], pathArr[i + 2]))
|
|
}
|
|
var curve = new THREE.CatmullRomCurve3(curveArr);
|
|
/**
|
|
* TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
|
|
*/
|
|
var tubeGeometry = new THREE.TubeGeometry(curve, 100, radius, 50, false);
|
|
var textureLoader = new THREE.TextureLoader();
|
|
var texture = textureLoader.load('data:application/octet-stream;base64,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');
|
|
|
|
// 设置阵列模式 RepeatWrapping
|
|
texture.wrapS = THREE.RepeatWrapping
|
|
texture.wrapT = THREE.RepeatWrapping
|
|
// 设置x方向的重复数(沿着管道路径方向)
|
|
// 设置y方向的重复数(环绕管道方向)
|
|
texture.repeat.x = 10;
|
|
texture.repeat.y = 4;
|
|
// 设置管道纹理偏移数,便于对中
|
|
texture.offset.y = 0.9;
|
|
var tubeMaterial = new THREE.MeshPhongMaterial({
|
|
map: texture,
|
|
transparent: true,
|
|
});
|
|
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
|
|
// 使用加减法可以设置不同的运动方向
|
|
setInterval(() => {
|
|
texture.offset.x -= 0.003
|
|
})
|
|
// return tube
|
|
scene.add(tube)
|
|
}
|
|
threeStart();
|
|
</script>
|
|
|
|
<body >
|
|
<div id="container"></div>
|
|
</body>
|
|
|
|
</html>
|
|
|