HTML+ThreeJS从零开始搭建一个展示三维模型展示网站【0】

silence401

已于 2022-06-14 00:18:49 修改

阅读量2.1k

点赞数 2

于 2022-06-14 00:17:55 首次发布

本文链接：https://blog.csdn.net/silence401/article/details/125270093

版权

ps 最近在做三维建模相关的工作，每次展示三维模型都需要用blende或者其他软件录制视频或图片特别不方便所以想用threejs html做一个三维模型展示的网页，本次制作只会涉及到简单的前端知识，本人也是边查边用。

1.首先我们来利用最简单的前端知识建一个网页

<html>
    <head>
        <title>day1</title>
    </head>
    <body>
        //<p></p>用来展示文字
        <p style="text-align:center">
            我们将在这里展示三维模型
        </p>
    </body>
</html>

一个网页的构成，<> </>中是html元素，一般html会包含

2.直奔主题，显示三维模型，显示三维模型当然要threejs了

threejs链接

<html>
    <head>
        <title>day1</title>
        <style>canvas { width: 100%; height: 100% }</style>
        <!-- 导入js的包，js是可以让html执行交互，动态展示的脚本 -->
        <script src="assets/threejs/build/three.js"></script>
        <style>
            body {
                margin: 0;
                background-color: pink;
                }
        </style>
    </head>
    <body>
        <!-- <p style="text-align:center">
            我们将在这里展示三维模型
        </p> -->
        <script>
        //<!-- //定义一个场景，场景一般包括相机、灯光、模型，熟悉渲染引擎的应该比较熟悉 -->
        var scene = new THREE.Scene()
        //定义一个相机，相机模型是透视模型，window是展示的页面
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        var renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
        });

        renderer.setSize(window.innerWidth, window.innerHeight)
        //html dom 是js用来修改和展示新的东西的方式，详情请见https://www.runoob.com/htmldom/htmldom-tutorial.html
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(geometry, material); 
        scene.add(cube);
        camera.position.z = 5;
        //开始渲染
        //renderer.render(scene, camera)
        
        function render(){
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
    </body>
</html>