Three.js学习记录--html5的编辑和第一个场景

时间：2021-09-14 04:22:27

刚开始接触Web移动开发，不知道用什么环境写，看网上都说只用一个text就行，但是没有代码提示，对于新手有点难度，最后用了WebStorm，很强大；

一、WebStorm

可以从网上下载并破解

插入点简介：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

二、Three.js下载

链接：http://threejs.org/ 右侧有download可以下载three.js包，解压如下

Three.js学习记录--html5的编辑和第一个场景

其中：build：里面有three.js 、three.min.js文件，我看官网的实例都是用three.min.js，不知道为什么。

           editor：里面的index.html是一个模型编辑器，里面集成的功能很好，这个我慢慢看。

           example:里面是实例，也可以在官网上看。

三、第一个程序

新建WebSorm工程：File->New Project->....

添加three.min.js等文件，这个实例是一个Learning WebGL书中的实例

Three.js学习记录--html5的编辑和第一个场景

代码如下：


<!DOCTYPE html>
<html>
<head>
    <title>Welcome to WebGL</title>

    <link rel="stylesheet" href="css/webglbook.css" />
    <script src="js/three.min.js"></script>
    <script src="js/RequestAnimationFrame.js"></script>
    <script>
        var renderer = null,
                scene = null,
                camera = null,
                cube = null,
                animating = false;
        function onLoad()
        {
            // Grab our container div
            var container = document.getElementById("container");

            // Create the Three.js renderer, add it to our div
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize(container.offsetWidth, container.offsetHeight);
            container.appendChild( renderer.domElement );

            // Create a new Three.js scene
            scene = new THREE.Scene();

            // Put in a camera
            camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
            camera.position.set( 0, 0, 3 );

            // Create a directional light to show off the object
            var light = new THREE.DirectionalLight( 0xffffff, 1.5);
            light.position.set(0, 0, 1);
            scene.add( light );

            // Create a shaded, texture-mapped cube and add it to the scene
            // First, create the texture map
            //
            var mapUrl = "imgs/molumen_small_funny_angry_monster.jpg";
            var map = THREE.ImageUtils.loadTexture(mapUrl);
            // Now, create a Phong material to show shading; pass in the map
            var material = new THREE.MeshPhongMaterial({ map: map });
            // Create the cube geometry
            var geometry = new THREE.CubeGeometry(1, 1, 1);
            // And put the geometry and material together into a mesh
            cube = new THREE.Mesh(geometry, material);
            // Turn it toward the scene, or we won't see the cube shape!
            cube.rotation.x = Math.PI / 5;
            cube.rotation.y = Math.PI / 5;
            // Add the cube to our scene
            scene.add( cube );
            // Add a mouse up handler to toggle the animation
            addMouseHandler();
            // Run our render loop
            run();
        }

        function run()        {
            // Render the scene
            renderer.render( scene, camera );
            // Spin the cube for next frame
            if (animating)            {
                cube.rotation.y -= 0.01;
            }
            // Ask for another frame
            requestAnimationFrame(run);
        }

        function addMouseHandler(){
            var dom = renderer.domElement;
            dom.addEventListener( 'mouseup', onMouseUp, false);
        }

        function onMouseUp	(event){
            event.preventDefault();
            animating = !animating;
        }

    </script>

</head>
<body onLoad="onLoad();" style="">
    <h1>Welcome to WebGL!</h1>
<div id="container" style="width:95%; height:80%; position:absolute;"></div>
<div id="prompt" style="width:95%; height:6%; bottom:0; text-align:center; position:absolute;">Click to animate the cube</div>
</body>
</html>
注意一点：如果直接打开HTML，浏览器Firefox允许加载本地文件，但谷歌不允许；但谷歌的调试功能很好，所以最好安装Apache小型服务器；
Three.js学习记录--html5的编辑和第一个场景

如果出现此画面，说明第一个实例就出来啦。


标签：

相关文章