100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
/* 隐藏滚动条 */
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
/* 使canvas充满整个窗口 */
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
import { 六角螺丝帽 } from './objects/螺丝帽.js';
|
|
import { 方形育苗盘 } from './objects/育苗盘.js';
|
|
|
|
// 1. 初始化场景、相机和渲染器
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
//// 2. 添加立方体(立方体:红色，中等粗糙度，高金属感)
|
|
//const cube = new THREE.Mesh(
|
|
// new THREE.BoxGeometry(1, 1, 1),
|
|
// new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5, metalness: 0.8 })
|
|
//);
|
|
//scene.add(cube);
|
|
|
|
//// 添加螺丝帽
|
|
//const 螺丝帽模型 = new THREE.Mesh(
|
|
// new 六角螺丝帽(1, 0.5, 0.6),
|
|
// new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.8 })
|
|
//);
|
|
//scene.add(螺丝帽模型);
|
|
|
|
setTimeout(() => {
|
|
// 添加育苗盘
|
|
console.log('添加育苗盘');
|
|
const 育苗盘模型 = new THREE.Mesh(
|
|
new 方形育苗盘(),
|
|
new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.5, metalness: 0.8 })
|
|
);
|
|
// 旋转育苗盘
|
|
console.log('旋转育苗盘');
|
|
育苗盘模型.rotation.x += 1.57;
|
|
育苗盘模型.rotation.y += 0;
|
|
scene.add(育苗盘模型);
|
|
}, 1000);
|
|
|
|
//new Promise((resolve) => {
|
|
// // 添加育苗盘
|
|
// const 育苗盘模型 = new THREE.Mesh(
|
|
// new 方形育苗盘(),
|
|
// new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.5, metalness: 0.8 })
|
|
// );
|
|
// // 旋转育苗盘
|
|
// 育苗盘模型.rotation.x += 1.57;
|
|
// 育苗盘模型.rotation.y += 0;
|
|
// scene.add(育苗盘模型);
|
|
// resolve();
|
|
//});
|
|
|
|
|
|
// 添加光源
|
|
scene.add(new THREE.AmbientLight(0x404040, 1)); // 环境光，柔和的白光
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 平行光
|
|
directionalLight.position.set(5, 5, 5); // 设置光源位置
|
|
scene.add(directionalLight);
|
|
|
|
camera.position.z = .75;
|
|
|
|
// 3. 动画循环
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
//cube.rotation.x += 0.01;
|
|
//cube.rotation.y += 0.01;
|
|
|
|
//// 旋转育苗盘
|
|
//育苗盘模型.rotation.x += 0.01;
|
|
//育苗盘模型.rotation.y += 0.01;
|
|
|
|
//// 旋转螺丝帽
|
|
//螺丝帽模型.rotation.x += 0.01;
|
|
//螺丝帽模型.rotation.y += 0.01;
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|
|
|
|
// 4. 响应窗口大小变化
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|
|
</script> |