Three.js中文文档在线教程 - 第一个程序

Read more on： http://techbrood.com/threejs/docs/#使用指南/入门介绍/创建一个场景(Scene)

three, 教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 423376
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>Three.js中文文档在线教程 - 第一个程序</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <a href="https://techbrood.com/threejs/docs" target="_blank"><h1>Three.js教程（在线参考手册）</h1></a>
    <script src="/libs/three.min.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;

var render = function() {
            requestAnimationFrame(render);

cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;

renderer.render(scene, camera);
        };

render();
    </script>
</body>

</html>

Read more on： http://techbrood.com/threejs/docs/#使用指南/入门介绍/创建一个场景(Scene)

three, 教程

编辑器支持Emmet

快捷键

Read more on： http://techbrood.com/threejs/docs/#使用指南/入门介绍/创建一个场景(Scene)

three, 教程

Three.js入门教程 - 坐标系、立方体和阴影

基于Three.js实现的体积光线前进特效 - 麻花（沙琪玛）模型

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：