教程链接
 -
美术物料.zip免费
2024-6-28 13:21上传, 157.13 KB, 下载次数: 16
下载
完结代码
<html lang="en">
<head>
<meta charset="utf-8">
<title>世界的尽头</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from './three.module.js';
import { OrbitControls } from './OrbitControls.js';
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);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target= new THREE.Vector3( 0, 2, 0 );
// window.addEventListener('mousemove', () => {
// console.log(camera.position);
// })
const word = {
addBox: null,
envTextrue: null,
boxY: null,
boxG: new THREE.Group(),
boxAll: [],
addPlan: null,
people: null
}
word.envTextrue = new THREE.TextureLoader().load("./tiakong1.jpg");
word.envTextrue.mapping = THREE.EquirectangularRefractionMapping
scene.environment = word.envTextrue
scene.background = word.envTextrue
word.addBox = () => {
const geometry = new THREE.BoxGeometry(1.4, 0.4, 2);
const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
return cube
}
word.addPlan = () => {
const geometry = new THREE.PlaneGeometry(1, 2.4);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff, side: 0,
map: new THREE.TextureLoader().load("./人物.png"), transparent: true
});
const plane = new THREE.Mesh(geometry, material);
return plane
}
word.people = word.addPlan()
word.people.material.map.colorSpace = THREE.SRGBColorSpace
let size = 1.6
word.people.scale.set(size, size, size)
word.people.position.set(-.65, 1.74, 0)
scene.add(word.people)
word.boxY = word.addBox()
word.boxY.visible = false
for (let i = 0; i < 10; i++) {
word.boxAll[i] = word.boxY.clone()
word.boxAll[i].position.set(i * 1.4, i * 0.4, 0)
word.boxAll[i].visible = true
word.boxG.add(word.boxAll[i])
word.boxG.position.x -= 1.4 / 2
word.boxG.position.y -= 0.4 / 2
}
word.boxG.add(word.boxY)
scene.add(word.boxG);
camera.position.set(-2.03833560884352,0.9562617465043892,7.607172055080853)
function animate() {
requestAnimationFrame(animate);
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
renderer.render(scene, camera);
controls.update();
}
animate();
</script>
</body>
</html>
首先我们下载起始环境场景代码
执行过之前项目又依赖的也可以直接复制核心起始代码
起始代码效果是一个楼梯
设计这个案例的时候我想到楚门的世界，当他明白世界的真相，并执着追到世界镜头的世界名画~~
从无聊的生活走向现实
本期我们要用到的技术栈
平面缓冲几何体（PlaneGeometry）const geometry = new THREE.PlaneGeometry( 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
// load a texture, set wrap mode to repeat
const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
|
