three.js入门第一个案例，和几个渲染一个场景最基本的方法。

本文链接：https://blog.csdn.net/qq_41579192/article/details/108953419

这里写目录标题

1. 演示地址
2. 一个最简单的three.js案例
3. 所有代码

1. 演示地址

2. 一个最简单的three.js案例

一个最简单的three.js项目有三个部分

场景scene，

    function initScene() {
        scene = new THREE.Scene();
    } // 初始化场景

相加camera

  function initCamera() {
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
    } // 初始化相机

渲染器render

 function initRenderer() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }// 初始化加载器

3. 所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../../three.js-r115/examples/main.css">
</head>
<body>
</body>
<script type="module">
    import * as THREE from '../../three.js-r115/build/three.module.js';

    let scene, camera, renderer;
    let cube;

    function initScene() {
        scene = new THREE.Scene();
    } // 初始化场景
    function initCamera() {
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
    } // 初始化相机
    function initRenderer() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }// 初始化加载器
    function initModel() {
        let geometry = new THREE.BoxGeometry();
        let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
    }// 初始化模型
    function render() {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }// 渲染
    function animate() {
        requestAnimationFrame(animate);
        render();
    }// 动画
    (function main() {
        initScene();
        initCamera();
        initRenderer();
        initModel();
        animate();
    })() // 运行
</script>
</html>