@Byleth Three.js Weg GL https://threejs.org/
```js
if(!Detector.webgl) Detector.addGetWebGLMessage();
var canvas = document.createElement('canvas'); // 画布
canvas.id="myCanvas";
canvas.width = 32;
canvas.height = window.innerHeight;
var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [], sprite, size, x, y, z; // 初始化相机,场景,渲染器,天空,网格,坐标系,材料等等
var mouseX = 0, mouseY = 0;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 6000;
scene = new THREE.Scene();
geometry = new THREE.Geometry();
var texture = THREE.ImageUtils.loadTexture( 'cloud/img/cloud.png' );
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var fog = new THREE.Fog(0x4584b4, -100, 3000); // 雾
function animate() {
requestAnimationFrame(animate); // 要求浏览器在下一次重绘之前,调用用户提供的回调函数。对回调函数的调用频率通常与显示器的刷新率相匹配。最常见的刷新率是 60hz (每秒 60 个周期/帧)。
render() // 渲染
}
function render() {
// ... 根据鼠标的 X 和 Y 调整相机视角,并渲染场景
renderer.render(scene, camera)
}
``` |