一个简单的Three.js实例

最新推荐文章于 2024-06-25 09:40:49 发布

阿迪王滑板鞋

最新推荐文章于 2024-06-25 09:40:49 发布

阅读量1.5k

点赞数 1

分类专栏： Three.js 文章标签： three.js

本文链接：https://blog.csdn.net/zouhaodong/article/details/103824665

版权

Three.js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <!--https://github.com/mrdoob/three.js/-->
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        function init() {
            //核心6步骤：
            //创建场景（scene）
            //添加网格模型（mesh）
            //添加灯光（light）
            //添加相机（camera）
            //创建渲染器（renderer）
            //渲染（render）

            //1、场景，注意大写
            var scene = new THREE.Scene();

            //几何模型（下面是立方体：长宽高）
            var geometry=new THREE.BoxGeometry(100,100,100);
            //兰伯特材质:红色
            var meterial=new THREE.MeshLambertMaterial({color:0xff0000});
         // var meterial=new THREE.MeshBasicMaterial({color:0xff0000});

            //2、网格模型
            var mesh=new THREE.Mesh(geometry,meterial);  //给立方体布上哑光材质
            //将创建好的网格模型添加到场景中
            scene.add(mesh);

            //3、添加灯光：白色的点光源
            var light=new THREE.PointLight(0xffffff);
            //设置光源的位置
            light.position.set(300,400,200);
            scene.add(light);

            //4、创建相机模型：透视相机(视角宽度,近平面宽高比,最近距离,最远距离)
            var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);
            camera.position.set(150,150,200);   //设定相机的位置
            camera.lookAt(scene.position);  //设定相机看向哪里

            //5、创建webGL渲染器
            var renderer=new THREE.WebGLRenderer();
            renderer.setSize(800,600);   //设置canvas的长、宽
            //如果要布满窗口就如下
            // renderer.setSize(window.innerWidth, window.innerHeight);

            //注意是renderer.domElement不是renderer,domElement
            document.body.appendChild(renderer.domElement);

            //6、渲染
            renderer.render(scene,camera);
        }
        window.onload = init();
    </script>
</body>
</html>

阿迪王滑板鞋

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
一个简单的Three.js实例

<!DOCTYPE html><html><head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <!--https://github.com/mrdoob/three.js/--&...
复制链接

扫一扫

专栏目录