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

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>

参考链接
blog

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值