three.js从入门到放弃(一)

hello,最近在学习three.js,所以没有更新博文。
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
但是网上现有的系统的资料及其匮乏,而three.js更新极快。想要在网上找资料学习的小伙伴一定要注意这点。

目前博主学习three.js的主要来源有以下:(官网的起步示例是及其值得去瞜一眼的)
three.js官网 https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
踏得网(three.js中文文档) https://www.techbrood.com/threejs/docs/
WebGL中文网 http://www.hewebgl.com/article/articledir/1
北风网 http://edu.ibeifeng.com/view-video-id-1733.html

博主现在用的是103版本的three.js

在three.js的3D实现中主要有三个部分:场景,照相机,渲染器
ok,呈上我们的第一个demo
为防止版本不同出现无法运行问题,请
点击此处下载此版本three.js库

<!DOCTYPE html>
<html>
<head>
    <title>three.js初探</title>
    <script type="text/javascript" src="three.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        canvas{display:block;}
    </style>
</head>
<body>
<div id="fwhf"></div>
<script type="text/javascript">
    //创建一个渲染器       即默认创建一个canvas     antialias: true圆滑效果
    var renderer = new THREE.WebGLRenderer({antialias: true});
    //渲染器宽高     即canvas宽高
    renderer.setSize(window.innerWidth,window.innerHeight);
    //渲染器颜色     即canvas的底色  参数: 颜色 (rgb也行), 透明度
    renderer.setClearColor('#fff',.5);
    //将渲染器添加到fwhf标签中    即将canvas添加至div中
    document.getElementById("fwhf").append(renderer.domElement);

    //创建一个场景
    var scene=new THREE.Scene();

    //生成一个坐标轴,辅助线,坐标轴的参数    rgb色对应xyz坐标轴
    var axes=new THREE.AxisHelper(20);
    //将辅助线添加至场景中
    scene.add(axes);

    //创建光源  参数:颜色,密度,距离 0无穷
    var light = new THREE.SpotLight(0xffffff,1,0);
    //设置光源的位置
    light.position.set(-40,60,100);
    //将光源添加至场景中
    scene.add(light);

    //创建一个物体    正方体+材质
    var cube = new THREE.Mesh(
        new THREE.CubeGeometry(10,10,10),
        new THREE.MeshLambertMaterial({color:0xff0000})
        )
    //设置物体的位置
    cube.position.x=0;
    cube.position.y=0;
    cube.position.z=0;
    //将物体添加至场景
    scene.add(cube);

    //创建一个相机    PerspectiveCamera透视相机   参数:视角,纵横比,进平面的距离,远平面的距离
    var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    //设置相机的位置
    camera.position.x=20;
    camera.position.y=20;
    camera.position.z=60;
    //指定摄像机的焦点
    camera.lookAt(scene.position);

    //渲染
    renderer.render(scene,camera);
</script>
</body>
</html>

效果如下
three.js从入门到放弃(一)

上一篇:three.js编辑挂在对象上的一个脚本


下一篇:ARC199