Three.js出入门

最新推荐文章于 2023-04-22 16:24:42 发布

felicitysq

最新推荐文章于 2023-04-22 16:24:42 发布

阅读量102

点赞数

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

本文链接：https://blog.csdn.net/felicitysq/article/details/96271239

版权

three.js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Three.js

Creating a scene(创建一个场景)

布景
- scene
- camera
- renderer
演员
- 3d立方体
  - 盒子模型
    
    包含立方体所有顶点和填充面的对象
  - 材料
    
    对其着色
  - 网孔
    
    承载几何模型的一个对象

渲染场景

渲染循环 render loop

function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();

创建动画

基本上都是在render循环中处理

function render() {
	requestAnimationFrame( render );
	cube.rotation.x += 0.1;//转动
	cube.rotation.y += 0.1;//转动
	renderer.render( scene, camera );
}
render();

全部代码

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <script src="/libs/three.r73.js"></script>
    <script>
        // Our Javascript will go here.
        var scene = 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);
        scene.add(cube);

        camera.position.z = 5;

        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.005
            cube.rotation.y += 0.005;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>

</html>

felicitysq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Three.js出入门

Three.jsCreating a scene(创建一个场景)布景scenecamerarenderer演员3d立方体盒子模型包含立方体所有顶点和填充面的对象材料对其着色网孔承载几何模型的一个对象渲染场景渲染循环 render loopfunction render() { requestAnimation...
复制链接

扫一扫

专栏目录