Three.js案例从0到1（1）建立应用架构

海里的鱼2022

已于 2022-02-22 00:47:12 修改

阅读量302

点赞数

分类专栏： JavaScript 模拟仿真文章标签： javascript three.js

于 2022-02-22 00:40:59 首次发布

本文链接：https://blog.csdn.net/pocean2012/article/details/123058385

版权

模拟仿真同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Three.js在HTML5中创建一个交互式的3D立方体动画，涉及CSS样式、脚本路径、导航布局及关键的JavaScript函数。从基本文件结构到主结构的详细步骤，适合初学者入门前端3D渲染。

摘要由CSDN通过智能技术生成

1. 基本文件结构

根目录，入口文件

CSS: 样式定义

fonts：字体定义

img：图片存放

js：存放three.min.js 以及用户脚本

2. 入口文件

其他html样式根据页面进行设计，可以用bluefish等来设计布局

最主要是定义样式和脚本路径

3. 导航布局


<body>
    <div class="world" id="world"></div>
    <nav class="meta">
        <a class="demo-link demo-link--current" href="demo0.1.html">demo0.1</a>
        <a class="demo-link" href="demo0.2.html">demo0.2</a>

    </nav>
</body>

4. 编写js文件，创建全局变量和主结构

var scene, cube, mesh, camera, renderer, container;


function init(event) {
    console.log("main js start. ")
    createScene();
    animate();
}
window.addEventListener('load', init, false);

5. 定义场景创建和动画函数


function createScene() {
    /**
     * 创建场景对象Scene
     */
    scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
        color: 0x00ff00
    }); //材质对象Material
    mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    //  document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    container = document.getElementById('world');
    container.appendChild(renderer.domElement);
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
}

function animate() {
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);


};

注意中间容器部分和前台代码world的关联

最后的demo0.1案例动画效果：

海里的鱼2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Three.js案例从0到1（1）建立应用架构

1. 基本文件结构根目录，入口文件CSS: 样式定义fonts：字体定义img：图片存放js：存放three.min.js 以及用户脚本2. 入口文件其他html样式根据页面进行设计，可以用bluefish等来设计布局最主要是定义样式和脚本路径<link rel="stylesheet" type="text/css" href="css/demo.css" /><link rel="stylesheet" type="text/css" h
复制链接

扫一扫