Three.js-一个简单的入门demo

最新推荐文章于 2024-05-29 16:35:44 发布

纳路透

最新推荐文章于 2024-05-29 16:35:44 发布

阅读量1k

点赞数

分类专栏： Three

本文链接：https://blog.csdn.net/weixin_43842660/article/details/97273869

版权

Three 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

效果如图：
在这里插入图片描述
代码如下：three.js的下载有很多种办法，我直接用npm安装three

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>step1</title>
    <script src="./node_modules/three/build/three.js"></script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    canvas {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <script>
    var scence = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1,1,1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scence.add( cube );
    camera.position.z = 5;
    var animate = function () {
        requestAnimationFrame( animate );
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render( scence, camera );
    }
    animate();
    </script>
</body>
</html>

纳路透

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Three.js-一个简单的入门demo

效果如图：代码如下：three.js的下载有很多种办法，我直接用npm安装three<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
复制链接

扫一扫