js怎么做实景图

使用JavaScript创建实景图的方法有多种，主要包括：使用HTML5 Canvas、WebGL、Three.js等技术。以下将详细介绍使用Three.js进行实景图创建的过程。

HTML5 Canvas、WebGL、Three.js 是创建实景图的主要技术。HTML5 Canvas 提供了一个绘图API，可以在网页上绘制2D图形；WebGL 允许在Canvas中绘制3D图形；Three.js 是一个基于WebGL的JavaScript库，简化了3D图形的创建。

一、HTML5 Canvas简介

HTML5 Canvas是创建2D图形的基础。它提供了一个绘图API，可以在网页上绘制各种图形。

1、Canvas的基本使用

首先，需要在HTML中创建一个canvas元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

然后，通过JavaScript获取这个canvas，并使用其绘图上下文：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

2、绘制基本形状

使用context对象可以绘制各种基本形状，如矩形、圆形等：

context.fillStyle = 'green';
context.fillRect(10, 10, 100, 100);

二、WebGL基础

WebGL是一个JavaScript API，用于在浏览器中绘制3D图形。它基于OpenGL ES 2.0。

1、初始化WebGL

与Canvas类似，首先需要在HTML中创建一个canvas元素，然后通过JavaScript获取其WebGL上下文：

<canvas id="glCanvas" width="500" height="500"></canvas>

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
    console.error('WebGL not supported');
}

2、创建和编译着色器

WebGL使用着色器来处理图形渲染。需要创建顶点着色器和片段着色器：

const vertexShaderSource = `
    attribute vec4 aVertexPosition;
    void main(void) {
        gl_Position = aVertexPosition;
    }
`;
const fragmentShaderSource = `
    void main(void) {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

3、创建和链接程序

将着色器链接到一个WebGL程序中：

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
}

三、Three.js简介

Three.js是一个封装了WebGL的JavaScript库，使得3D图形的创建更加简单和直观。

1、初始化Three.js场景

首先，在HTML中引入Three.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

然后，通过JavaScript创建一个Three.js场景、相机和渲染器：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2、创建几何体和材质

Three.js中，几何体和材质是创建3D对象的基础。以下示例创建一个立方体：

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

3、设置相机位置和渲染循环

设置相机位置，并创建一个渲染循环以不断更新场景：

camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

四、实景图的创建

在创建实景图时，通常需要使用纹理和光照。以下是详细步骤：

1、加载纹理

Three.js提供了一个TextureLoader来加载纹理：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });

2、添加光源

光源可以使场景更加真实。Three.js中有多种光源类型，例如点光源、平行光等：

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);

3、加载复杂模型

除了基本的几何体，可以加载更复杂的3D模型，例如通过OBJLoader或GLTFLoader：

const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function(gltf) {
    scene.add(gltf.scene);
});

五、交互和动画

为了使实景图更加生动，可以添加用户交互和动画。

1、用户交互

可以使用Three.js的Raycaster来实现点击选择对象的功能：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log('Intersected object:', intersects[0]);
    }
}
window.addEventListener('click', onMouseClick);

2、动画效果

通过修改对象的属性，可以实现各种动画效果。例如，旋转和移动对象：

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.position.x += 0.01;
    if (cube.position.x > 5) {
        cube.position.x = -5;
    }
    renderer.render(scene, camera);
}
animate();

六、优化和发布

在完成实景图的创建后，需要进行优化和发布，以确保性能和用户体验。

1、性能优化

Three.js提供了多种性能优化方法，例如使用LOD（细节层次）和简化几何体：

const lod = new THREE.LOD();
const highDetail = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
const lowDetail = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.5), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
lod.addLevel(highDetail, 0);
lod.addLevel(lowDetail, 10);
scene.add(lod);

2、发布和兼容性

在发布时，需要确保兼容性和加载速度。可以使用工具如webpack进行代码打包，并使用CDN加速资源加载：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

七、总结

创建实景图需要综合使用HTML5 Canvas、WebGL、Three.js等技术。通过掌握这些技术，可以创建出丰富多彩的3D图形。Three.js 是一个强大的工具，简化了WebGL的使用，使得创建3D图形更加直观和简单。无论是初学者还是高级用户，都可以利用Three.js创建出令人惊叹的实景图。