zoukankan      html  css  js  c++  java
  • three.js入门

    1.下载three.js库。https://github.com/mrdoob/three.js/

    第一步:新建一个项目文件夹“Threejs”

    第二步:在Threejs文件夹内新建一个html文件(index.html)。该文件是通过浏览器进入游戏的入口。

    第三步:在Threejs文件夹内新建一个libs文件夹,用来存放three.js库和需要用到的其他库。

    第四步:在Threejs文件夹内新建一个images文件夹,用来存放需要素材。

    第五步:在Threejs文件夹内新建一个js文件夹,用来存放我们开发项目写的脚本。

    index.html文件

    <!DOCTYPE html>
    <html>
    <head>
        <title>three.js</title>
        <script src="libs/three.js"></script>
        <script src="js/main.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <script>
    
    </script>
    <body>
    </body>
    </html>

    three.js文件 在目录下建立libs文件夹,把three,js拷贝进去

    https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js

    main.js文件

    var renderer;//渲染器
    var scene;//场景
    var camera;//相机
    function init() {//init()函数是我们整个项目的入口,类似我们平时编程时的main函数。
        scene = new THREE.Scene();//场景
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
        renderer = new THREE.WebGLRenderer();//渲染
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
    
        document.body.appendChild(renderer.domElement);
        render();
    }
    function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    window.onload = init;

    漆黑一片。因为我们还没向场景添加任何东西。

  • 相关阅读:
    CLR 对比 JVM
    unity drawcall测试
    UGUI 分页渐变居中效果
    几个ADB常用命令
    jQuery分步步骤
    jquery toast插件
    jQuery数字滚动(模拟网站人气、访问量递增)原创
    jQuery实用工具集
    scrollReveal.js – 页面滚动显示动画JS
    jquery轻量级数字动画插件jquery.countup.js
  • 原文地址:https://www.cnblogs.com/Yimi/p/6006882.html
Copyright © 2011-2022 走看看