<!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. 【习题 3-7 UVA - 1368 】DNA Consensus String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举每一位字母是什么. 从小到大枚举. 然后计算每一位的总贡献是多少. 取最小的那个输出. [代码] #include <bi ...

  2. 适用android的MVP:怎样组织展示层

    原文 MVP for Android:How to organize presentation layer http://antonioleiva.com/mvp-android/ 译文 MVP(Mo ...

  3. vagrant 的安装与使用

    1. 安装 ubuntu 安装vagrant过程 ubuntu 安装 vagrant 时需要首先安装 virtualbox: (1)下载安装与当前 ubuntu 版本相适应的 virtualbox 安 ...

  4. CQRS之旅——旅程6(我们系统的版本管理)

    旅程6:我们系统的版本管理 准备下一站:升级和迁移 "变化是生活的调味品."威廉·考珀 此阶段的最高目标是了解如何升级包含实现CQRS模式和事件源的限界上下文的系统.团队在这一阶段 ...

  5. [Angular] Angular Global Keyboard Handling With EventManager

    If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'. ...

  6. 35、在编译Linux内核中增加程序需要完成以下3项工作

    在编译Linux内核中增加程序需要完成以下3项工作: 将编写的源代码拷入Linux内核源代码的相应目录. 在目录的Kconfig文件中增加关于新源代码对应项目的编译配置选项 在目录的Makefile文 ...

  7. Qt 信号-槽的同步与异步处理

    通常使用的connect,实际上最后一个參数使用的是Qt::AutoConnection类型:Qt支持6种连接方式.当中3中最主要: 1.Qt::DirectConnection(直连方式)(信号与槽 ...

  8. Cannot find module "element-ui/lib/theme-default/index.css"——解决办法

    在vuejs中使用element-ui 1.安装 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnp ...

  9. vuejs及相关工具介绍

    轻量级前端mvm的框架 图片.png 对es6语法的简单描述 图片.png 融合了react和angular的优点,组件化和灵活应用和指令,在国际上是一款极有潜力的前端框架. 1.双向绑定 两段相加得 ...

  10. 【9204】第k小整数

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 现有n个整数,n≤10000,要求出这n个正整数中的第k个最小整数(相同大小的整数只计算一次),k≤1000 ...