我正在尝试将三个.js中的基本webgl粒子示例添加到默认欢迎屏幕中的sails.js框架activityOverlord示例中。 所以我首先在链接器/ js文件夹中复制/粘贴我需要的三个javascript库，然后将它们添加到grunt文件中：
<script src="/linker/js/three.min.js"></script>
<script src="/linker/js/Detector.js"></script>
<script src="/linker/js/stats.min.js"></script>
然后，我将three.js代码示例添加到.ejs文件（这里是/static/index.ejs文件）代码不起作用，而如果我在layout.ejs文件中添加javascript代码之前它精美地展示了webgl ......
<!DOCTYPE html>
<html>
<head>
<title><%- title %></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `link` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' boilerplate asset management.
By default, tylesheets from your `assets/linker/styles` folder are included
here automatically. Both CSS (.css) and LESS (.less) are supported.
In production, your styles will be minified and concatenated into a single file.
To customize any part of the built-in behavior, just edit your Gruntfile.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<link rel="stylesheet" href="/linker/styles/bootstrap.css">
<link rel="stylesheet" href="/linker/styles/custom.css">
<!--STYLES END-->
<!--Added this so the client has access to the csrf tag and it's grabbed first service side on every page -->
<script type="text/javascript">
window.overlord = { csrf: "<%= _csrf %>" };
</script>
<!-- The sound file tht will play on activity events -->
<audio id="chatAudio">
<source src="/sounds/notify.ogg" type="audio/ogg">
<source src="/sounds/notify.mp3" type="audio/mpeg">
<source src="/sounds/notify.wav" type="audio/wav">
</audio>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"> activityOverlord</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<% if (session.authenticated) { %>
<li class="active"><a href="/user/show/<%= session.User.id %>"><%= session.User.name %> </a> </li>
<% } %>
<% if (session.authenticated && session.User.admin) { %>
<li><a href="/user">User Administration</a></li>
<li><a href="#">Placeholder2</a></li>
<% } %>
</ul>
<div class="navbar-right">
<% if (session.authenticated) { %>
<a class="btn btn-default navbar-btn navbar-right" href="/session/destroy">sign-out</a>
<% } %>
</div>
<% if (!session.authenticated) { %>
<form class="navbar-form navbar-right" action="/session/create">
<div class="form-group">
<input type="text" placeholder="Email" name="email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<% } %>
</div>
</div>
</div>
<%- body %>
<!-- <div class="container">
<hr>
<footer class="footer pull-right">
<div>
<a href="http://sailsjs.com/">sails.js</a>
<div>tutorial by irl nathan, with a bunch of help from cody, gabe, heather, mike, scott and zoli</div>
</div>
</footer>
</div>-->
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/linker/templates` folder, then
include them here automatically.
To customize this behavior to fit your needs, just edit your Gruntfile.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your templates using a server-side stringfile
before they're served.
-->
<!--TEMPLATES-->
<script type="text/javascript" src="/jst.js"></script>
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' boilerplate asset management.
By default, filesin your `assets/linker/js` folder are included here
automatically. Both JavaScript (.js) and CoffeeScript (.coffee) are supported.
In production, your scripts will be minified and concatenated into a single file.
To customize any part of the built-in behavior, just edit your Gruntfile.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<script src="/linker/js/socket.io.js"></script>
<script src="/linker/js/sails.io.js"></script>
<script src="/linker/js/jquery.js"></script>
<script src="/linker/js/jquery.validate.min.js"></script>
<script src="/linker/js/app.js"></script>
<script src="/linker/js/three.min.js"></script>
<script src="/linker/js/Detector.js"></script>
<script src="/linker/js/stats.min.js"></script>
<script src="/linker/js/bootstrap.js"></script>
<script src="/linker/js/customValidate.js"></script>
<script src="/linker/js/underscore.js"></script>
<!--SCRIPTS END-->
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - buffergeometry - lines</div>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
container = document.getElementById( 'container' );
//
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );
camera.position.z = 2750;
scene = new THREE.Scene();
var segments = 10000;
var geometry = new THREE.BufferGeometry();
var material = new THREE.LineBasicMaterial({ vertexColors: true });
geometry.addAttribute( 'position', new Float32Array( segments * 3 ), 3 );
geometry.addAttribute( 'color', new Float32Array( segments * 3 ), 3 );
var positions = geometry.getAttribute( 'position' ).array;
var colors = geometry.getAttribute( 'color' ).array;
var r = 800;
for ( var i = 0; i < segments; i ++ ) {
var x = Math.random() * r - r / 2;
var y = Math.random() * r - r / 2;
var z = Math.random() * r - r / 2;
// positions
positions[ i * 3 ] = x;
positions[ i * 3 + 1 ] = y;
positions[ i * 3 + 2 ] = z;
// colors
colors[ i * 3 ] = ( x / r ) + 0.5;
colors[ i * 3 + 1 ] = ( y / r ) + 0.5;
colors[ i * 3 + 2 ] = ( z / r ) + 0.5;
}
geometry.computeBoundingSphere();
mesh = new THREE.Line( geometry, material );
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaInput = true;
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '350px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.001;
mesh.rotation.x = time * 0.25;
mesh.rotation.y = time * 0.5;
renderer.render( scene, camera );
}
</script>
知道我在错误的情况下在ejs视图文件中注入three.js javascript代码，以便我可以在不同的视图中启动不同的three.js程序
答案 0 :(得分：0)
刚刚找到解决方案，在sails的ejs视图中添加来自three.js的webgl程序...... :)简单。只要＆lt;％ - body％＆gt;可以在其中一个视图的容器中添加three.js的javascript代码。在layout.ejs中放置了库...结果看起来非常漂亮:)请看图片：plus.google.com/111811850549054618411/posts/bMuE6VXpnUt