mirror of
https://github.com/tengge1/ShadowEditor.git
synced 2026-01-18 15:02:09 +00:00
166 lines
5.9 KiB
HTML
166 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>纽约</title>
|
|
<style>
|
|
body {
|
|
background-color: #d8e7ff;
|
|
font-family: Monospace;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body youdao="bind">
|
|
<div style="position: absolute; left: 0px; top: 15px; width: 100%; color: rgba(0, 0, 64, 0.498039); text-align: center;">click and hold to move forward</div>
|
|
<script src="js/three.min.js"></script>
|
|
<script src="../assets/js/controls/FirstPersonControls.js"></script>
|
|
<script>
|
|
var scene, camera, renderer;
|
|
var light, controls;
|
|
var lastTime;
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
renderer = new THREE.WebGLRenderer({
|
|
antialias: false,
|
|
alpha: false
|
|
});
|
|
renderer.setClearColor(0xd8e7ff);
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 3000);
|
|
camera.position.y = 80;
|
|
|
|
controls = new THREE.FirstPersonControls(camera);
|
|
controls.movementSpeed = 20;
|
|
controls.lookSpeed = 0.05;
|
|
controls.lookVertical = true;
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.FogExp2(0xd0e0f0, 0.0025);
|
|
|
|
light = new THREE.HemisphereLight(0xfffff0, 0x101020, 1.25);
|
|
light.position.set(0.75, 1, 0.25);
|
|
scene.add(light);
|
|
|
|
var plane = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000), new THREE.MeshBasicMaterial({
|
|
color: 0x101018
|
|
}));
|
|
plane.rotation.x = -90 * Math.PI / 180;
|
|
scene.add(plane);
|
|
|
|
var geometry = new THREE.CubeGeometry(1, 1, 1);
|
|
geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
|
|
geometry.faces.splice(3, 1);
|
|
geometry.faceVertexUvs[0].splice(3, 1);
|
|
geometry.faceVertexUvs[0][2][0].set(0, 0);
|
|
geometry.faceVertexUvs[0][2][1].set(0, 0);
|
|
geometry.faceVertexUvs[0][2][2].set(0, 0);
|
|
geometry.faceVertexUvs[0][2][3].set(0, 0);
|
|
|
|
var mesh = new THREE.Mesh(geometry);
|
|
var geometry = new THREE.Geometry();
|
|
|
|
var light = new THREE.Color(0xffffff);
|
|
var dark = new THREE.Color(0x303050);
|
|
|
|
for (var i = 0; i < 20000; i++) {
|
|
var n = 1 - Math.random() * Math.random();
|
|
var color = new THREE.Color().setRGB(n + Math.random() * 0.1, n,
|
|
n + Math.random() * 0.1);
|
|
|
|
var lightColor = color.clone().multiply(light);
|
|
var darkColor = color.clone().multiply(dark);
|
|
|
|
mesh.position.x = Math.floor(Math.random() * 200 - 100) * 10;
|
|
mesh.position.z = Math.floor(Math.random() * 200 - 100) * 10;
|
|
|
|
mesh.rotation.y = Math.random();
|
|
|
|
mesh.scale.x = mesh.scale.z = Math.random() * Math.random() * Math.random() * Math.random() * 50 + 10;
|
|
mesh.scale.y = (Math.random() * Math.random() * Math.random() *
|
|
mesh.scale.x) * 8 + 8;
|
|
|
|
var geometry1 = mesh.geometry;
|
|
|
|
for (var j = 0, len = geometry1.faces.length; j < len; j++) {
|
|
if (j === 2) {
|
|
geometry1.faces[j].vertexColors = [color, color, color, color];
|
|
} else {
|
|
geometry1.faces[j].vertexColors = [lightColor, darkColor, darkColor,
|
|
lightColor
|
|
];
|
|
};
|
|
};
|
|
THREE.GeometryUtils.merge(geometry, mesh);
|
|
};
|
|
|
|
var texture = new THREE.Texture(generateTexture());
|
|
texture.anisotropy = renderer.getMaxAnisotropy();
|
|
texture.needsUpdate = true;
|
|
|
|
var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
|
|
map: texture,
|
|
vertexColors: THREE.VertexColors
|
|
}));
|
|
scene.add(mesh);
|
|
|
|
var div = document.createElement('div');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '0';
|
|
div.style.top = '15px';
|
|
div.style.width = '100%';
|
|
div.style.color = 'rgba(0,0,64,0.5)';
|
|
div.style.textAlign = 'center';
|
|
div.textContent = 'click and hold to move forward';
|
|
document.body.appendChild(div);
|
|
|
|
lastTime = performance.now();
|
|
};
|
|
|
|
function generateTexture() {
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = 32;
|
|
canvas.height = 64;
|
|
|
|
var context = canvas.getContext('2d');
|
|
context.fillStyle = '#ffffff';
|
|
context.fillRect(0, 0, 32, 64);
|
|
|
|
for (var i = 2; i < 64; i += 2) {
|
|
for (var j = 0; j < 32; j += 2) {
|
|
var n = Math.floor(Math.random() * 64);
|
|
context.fillStyle = 'rgb(' + [n, n, n].join(',') +
|
|
')';
|
|
context.fillRect(j, i, 2, 1);
|
|
};
|
|
};
|
|
|
|
var canvas1 = document.createElement('canvas');
|
|
canvas1.width = 512;
|
|
canvas1.height = 1024;
|
|
|
|
var context = canvas1.getContext('2d');
|
|
context.imageSmoothingEnabled = false;
|
|
context.webkitImageSmoothingEnabled = false;
|
|
context.mozImageSmoothingEnabled = false;
|
|
context.drawImage(canvas, 0, 0, canvas1.width, canvas1.height);
|
|
return canvas1;
|
|
};
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
var time = performance.now() / 1000;
|
|
controls.update(time - lastTime);
|
|
renderer.render(scene, camera);
|
|
lastTime = time;
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html> |