JavaScript 3D动画库three.js示例篇

JavaScript 3D动画库three.js示例篇

本文主要介绍JavaScript 3D动画库three.js示例，关于three.js库基础知识可参见：JavaScript 3D动画库three.js入门篇_cnds123的专栏-CSDN博客

通过script标签来引入three.js，又有两种方式：

一是使用CDN（Content Delivery Network，即内容分发网络），如：

这种方式需要联网才有效。

二是将从Three.js的官方网站下载three.js或three.min.js文件（在下载包的Build文件夹中）复制到适当位置，这儿以存放到HTML文件所在的文件夹的子文件夹js中，如：<script src="js/three.min.js"></script>

这种方式不需要联网。

通过script标签来引入three.js比较简单，适合简单的练习，快速体验。

下面给出通过script标签引入three.js的模板：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<!—引入three.js或three.min.js，后者是压缩的，路径根据实际情况写 -->
<script src='js/three.min.js'></script>
<body>
<script>
    //创建场景，游戏中的事情发生的地方
    var scene=new THREE.Scene();

    //创建透视投影相机用来观察取景，视角45度，画幅比例 宽比高等
    var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1, 10000);

    //创建渲染器，将相机看到的内容绘制到屏幕上
    var renderer=new THREE.WebGLRenderer();
    //渲染器canvas宽高设为与窗口一致
    renderer.setSize(window.innerWidth,window.innerHeight);
    //将渲染器对应的dom元素添加到body中
    document.body.appendChild(renderer.domElement);

    //定义一个几何体（物体）-----↓-------
    var geometry=new THREE.CylinderGeometry(5,10,30);
    //定义一种材质，显示为线框
    var material = new THREE.MeshBasicMaterial({color:0xB3DD,wireframe:true});
    //网格(Mesh)是用来承载几何模型的一个对象，可以把材料应用到它上面
    var threeDim =new THREE.Mesh(geometry, material);
    //把几何模型添加到场景中
    scene.add(threeDim);

    //移动相机位置
    camera.position.z = 80;

    function render() {
        //渲染循环，以每秒60次的频率来绘制场景
         requestAnimationFrame(render);
         //设置球体绕y轴旋转
         threeDim.rotation.y += 0.005;
         renderer.render(scene, camera); //渲染，显示摄像头在屏幕上看到的内容
    }
    render();

   //----------↑----------------
 
</script>
</body>
</html>

保存文件,用浏览器运行之，可见运行效果。

环形示例，源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>环形</title>

</head>
<!—引入three.js或three.min.js，后者是压缩的，路径根据实际情况写 -->
<script src='js/three.min.js'></script>
<body>
<script>
    //创建场景，游戏中的事情发生的地方
    var scene=new THREE.Scene();

    //创建透视投影相机用来观察取景，视角45度，画幅比例 宽比高等
    var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1, 10000);

    //创建渲染器，将相机看到的内容绘制到屏幕上
    var renderer=new THREE.WebGLRenderer();
    //渲染器canvas宽高设为与窗口一致
    renderer.setSize(window.innerWidth,window.innerHeight);
    //将渲染器对应的dom元素添加到body中
    document.body.appendChild(renderer.domElement);

    //定义一个几何体（物体）-----↓-------
    var geometry=new THREE.TorusGeometry(20, 5);
    //定义一种材质，显示为线框wireframe，平面阴影flatShading
    var material = new THREE.MeshBasicMaterial({color:0xB3DD,wireframe: true});
    //网格(Mesh)是用来承载几何模型的一个对象，可以把材料应用到它上面
    var three3D=new THREE.Mesh(geometry, material);
    //把几何模型添加到场景中
    scene.add(three3D);
    //
    three3D.rotation.set(0.5,0.5,0);

    //移动相机位置
    camera.position.z = 80;

    //运动
    function render() {
        //渲染循环，以每秒60次的频率来绘制场景
         requestAnimationFrame(render);
         //设置球体绕y轴旋转
         three3D.rotation.y += 0.005;
         renderer.render(scene, camera); //渲染，显示摄像头在屏幕上看到的内容
    }
    render();

   //----------↑----------------
   //renderer.render(scene,camera); //渲染，显示摄像头在屏幕上看到的内容

</script>
</body>
</html>

保存文件,用浏览器运行之，可见运行效果：

JavaScript 3D动画库three.js示例篇

猜你喜欢