<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body { margin: ; }

            canvas { width: %; height: % }

    </style>

    <script src="./node_modules/three/three.js"></script>

    <script src="./node_modules/three/examples/js/controls/OrbitControls.js"></script>

    <script src="./node_modules/three/examples/js/loaders/OBJLoader.js"></script>

</head>

<body>

    <script>

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

        var geometry = new THREE.BoxGeometry(,,) //创建正方形 长宽高

        var material = new THREE.MeshBasicMaterial({color:0xff0000})// 创建材质

        var mesh = new THREE.Mesh(geometry,material)//创建网格

        scene.add(mesh);

        var light = new THREE.PointLight(0xffffff);//创建光源

        light.position.set(,,)

        scene.add(light)//添加光源

        scene.add(new THREE.AmbientLight(0x333333))

        var camera = new THREE.PerspectiveCamera(,/,,); //创建相机

        camera.position.set(,,);

        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer(); //渲染器

        renderer.setSize(,);

        document.body.appendChild(renderer.domElement);

        renderer.render(scene,camera);

        function render(){

            renderer.render(scene,camera);

        }

        var controls = new THREE.OrbitControls(camera); //相机控制器 鼠标

        controls.addEventListener('change',render)

// 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 );

    </script>

</body>

</html>

three.js 初学小示例的更多相关文章

  1. MVC客户端验证的小示例

    MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings>  <add key="ClientValidat ...

  2. node.js 初学（一）—— http fs 服务器/文件/post get

    node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...

  3. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

  4. ReactNative新手学习之路06滚动更新ListView数据的小示例

    本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...

  5. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. 撸一个JS正则小工具

    写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...

  7. Node.js初学

    Node.js 初学~ 其技术上最大的卖点是非阻塞的I/O和基于事件的异步处理机制. 后端没有什么深入研究,一直对其不是很了解. 透过一个例子看 非阻塞 与 通常的 阻塞 var text = rea ...

  8. node.js 初学（二）—— 搭建注册/登录服务器

    node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...

  9. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

随机推荐

  1. 【hdu 2328】Corporate Identity

    [链接]h在这里写链接 [题意] 找一个字典序最小的公共最长子串; [题解] 后缀数组. 把所有的串用不同的分隔符分开.(大于'z'的分隔符); 然后求出那几个固定的数组. 二分一下那个子串的长度. ...

  2. RMQ问题-ST方法

    参考 http://blog.csdn.net/sdj222555/article/details/7875575 RMQ 就是 Range Minimum/Maximum Query 就是求区间最值 ...

  3. UvaLive 6663 Count the Regions 离散化+DFS

    链接:http://vjudge.net/problem/viewProblem.action?id=49408 题意:在平面内给出若干个矩形,求出它们能将整个平面分成多少份. 思路:刚開始一眼看到认 ...

  4. IOS RGB颜色转换

    - (UIColor *)getColor:(NSString *)hexColor { unsigned int red,green,blue; NSRange range; range.lengt ...

  5. ng build --base-href的设定问题

    项目构建部署中遇到的问题: 1.不使用hash,如何解决刷新页面404的问题? 说明: root  指定项目地址路径,默认为nginx下的html index  默认访问index文件 try_fil ...

  6. Windows平台CUDA开发之前的准备工作

    CUDA是NVIDIA的GPU开发工具,眼下在大规模并行计算领域有着广泛应用. windows平台上面的CUDA开发之前.最好去NVIDIA官网查看说明,然后下载对应的driver. ToolKits ...

  7. c#编程：给定一个正整数求出是几位数并逆序输出

    <span style="color:#FF0000;">第一步:把输入的数字转为字符串n.ToString() 第二步:求出字符串的长度即为正整数的位数 第三步:从后 ...

  8. Swift3.0 功能一(持续更新)

    修改项目名称两种方式 1.Bundle name 2.Bundle display name try 三种处理异常的方式 // 在swift中提供三种处理异常的方式 // 方式一:try方式 程序员手 ...

  9. js进阶课程ajax简介（ajax是浏览器来实现的）

    js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...

  10. C#操作SqlServer MySql Oracle通用帮助类

    C#操作SqlServer MySql Oracle通用帮助类 [前言] 作为一款成熟的面向对象高级编程语言,C#在ADO.Net的支持上已然是做的很成熟,我们可以方便地调用ADO.Net操作各类关系 ...