<!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. C＃ 进制转换 在什么情况下使用16进制，字节数组，字符串

    C# 进制转换 Admin2013年9月18日 名人名言:从工作里爱了生命,就是通彻了生命最深的秘密.——纪伯伦 1.请问c#中如何将十进制数的字符串转化成十六进制数的字符串 //十进制转二进制Con ...

  2. Scala入门到精通——第十九节 隐式转换与隐式參数（二）

    作者:摇摆少年梦 配套视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 隐式參数中的隐式转换 函数中隐式參数使用概要 隐式转换问题梳理 1. 隐式參数中的 ...

  3. 错误代码： 1449 The user specified as a definer (&#39;root&#39;@&#39;%&#39;) does not exist

    1. 错误描写叙述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:call analyse_use('20150501','201506 ...

  4. [Angular] New async 'as' syntax and ngIf.. else

    From Anuglar v4 above, we are able to using 'as' with async pipe. This allow as using 'new variable' ...

  5. poj1679 The Unique MST（判定次小生成树）

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23180   Accepted: 8235 D ...

  6. python 命令行：help()，'more'不是内部或外部命令，也不是可运行的程序或批处理文件

    Python下使用help(dict),显示'more'不是内部或外部命令,也不是可运行的程序或批处理文件,该如何处理? 环境变量设置的问题,进入 Path 的环境变量设置界面,将;%SystemRo ...

  7. 表单提交数据格式form data

    前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交 ...

  8. 【ALearning】第四章 Android Layout组件布局(二)

    前面我们分别介绍和学习了LinearLayout(线性布局).FrameLayout(单帧布局)和AbsoluteLayout(绝对布局).这次我们要进行RelativeLayout(相对布局)和Ta ...

  9. [RxJS] Multicast with a selector argument, as a sandbox

    Let's explore a different use of the multicast() operator in RxJS, where you can provide a selector ...

  10. webuploader 小demo

    页面写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...